<template>
  <view class="image-matrix" :style="{'background': item.bgColor, 'border-radius': (item.bgStyle == 'circle') ? '12px' : '0px', 'margin-left': item.bgMargin + 'px', 'margin-right': item.bgMargin + 'px', 'margin-top': item.pageMargin + 'px'}">

    <!-- 布局类型1：一张大图铺满 -->
    <view v-if="item.style == 1" class="matrix-layout type-1">
      <view
        v-if="item.images[0]"
        class="matrix-item large"
      >
        <image :src="images[0].url" class="matrix-image" />
      </view>
    </view>
    
    <!-- 布局类型2：左右两张图铺满 -->
    <view v-else-if="item.style == 2" class="matrix-layout type-2">
      <view
        v-for="(image, index) in item.images"
        :key="index"
        class="matrix-item half"
      >
        <image :src="image.url" class="matrix-image" />
      </view>
    </view>
    
    <!-- 布局类型3：三张图一排铺满 -->
    <view v-else-if="item.style == 3" class="matrix-layout type-3">
      <view
        v-for="(image, index) in item.images"
        :key="index"
        class="matrix-item third"
      >
        <image :src="image.url" class="matrix-image" />
      </view>
    </view>
    
    <!-- 布局类型4：左边一张，右边上下两张 -->
    <view v-else-if="item.style == 4" class="matrix-layout type-4">
      <view
        v-if="item.images[0]"
        class="matrix-item left-large"
      >
        <image :src="item.images[0].url" class="matrix-image"/>
      </view>
      <view class="right-small">
        <view
          v-for="(image, index) in item.images.slice(1, 3)"
          :key="index"
          class="matrix-item small"
        >
          <image :src="image.url" class="matrix-image"/>
        </view>
      </view>
    </view>
    
    <!-- 布局类型5：一横排4张 -->
    <view v-else-if="item.style == 5" class="matrix-layout type-5">
      <view
        v-for="(image, index) in item.images.slice(0, 4)"
        :key="index"
        class="matrix-item quarter"
      >
        <image :src="image.url" class="matrix-image" />
      </view>
    </view>
    
    <!-- 布局类型6：四张组成一个2*2的正方形 -->
    <view v-else-if="item.style == 6" class="matrix-layout type-6">
      <view
        v-for="(image, index) in item.images.slice(0, 4)"
        :key="index"
        class="matrix-item square"
      >
        <image :src="image.url" class="matrix-image" />
      </view>
    </view>
  </view>
</template>

<script>

	export default {
	  name: 'ImageMatrix',
	  props: {
		item: {
		  type: Object,
		  default: {}
		}
	  },
	  data() {
		  return {
			currentLayoutType: 0
		  }
	  },
	  methods: {
	  }
	}
</script>

<style scoped lang="scss">
/* 图片矩阵样式 */
.image-matrix {
  border-radius: 8px;
}

.dark-theme .image-matrix {
  background-color: #2a2a2a;
}

.matrix-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.layout-selector {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  white-space: nowrap;
}

.layout-selector::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.layout-option {
  display: inline-block;
  padding: 6px 12px;
  background-color: #f5f5f5;
  border-radius: 16px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.layout-option.active {
  background-color: #e93939;
  color: #fff;
}

.dark-theme .layout-option {
  background-color: #333;
  color: #ccc;
}

.dark-theme .layout-option.active {
  background-color: #e93939;
  color: #fff;
}

/* 布局类型1：一张大图铺满 */
.matrix-layout.type-1 {
  display: flex;
  height: 200px;
}

.matrix-layout.type-1 .matrix-item.large {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

/* 布局类型2：左右两张图铺满 */
.matrix-layout.type-2 {
  display: flex;
  height: 160px;
  gap: 8px;
}

.matrix-layout.type-2 .matrix-item.half {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

/* 布局类型3：三张图一排铺满 */
.matrix-layout.type-3 {
  display: flex;
  height: 140px;
  gap: 8px;
}

.matrix-layout.type-3 .matrix-item.third {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

/* 布局类型4：左边一张，右边上下两张 */
.matrix-layout.type-4 {
  display: flex;
  height: 160px;
  gap: 8px;
}

.matrix-layout.type-4 .matrix-item.left-large {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.matrix-layout.type-4 .right-small {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.matrix-layout.type-4 .matrix-item.small {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

/* 布局类型5：一横排4张 */
.matrix-layout.type-5 {
  display: flex;
  height: 120px;
  gap: 8px;
}

.matrix-layout.type-5 .matrix-item.quarter {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

/* 布局类型6：四张组成一个2*2的正方形 */
.matrix-layout.type-6 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  height: 200px;
}

.matrix-layout.type-6 .matrix-item.square {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

/* 通用矩阵项样式 */
.matrix-item {
  position: relative;
}

.matrix-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.matrix-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: #fff;
  font-size: 12px;
  text-align: center;
}
</style>